<template>
  <router-view v-slot="{ Component }">
    <template v-if="Component">
      <transition mode="out-in" name="fade">
        <keep-alive :include="[...menuStore.keepAliveNameSet]">
          <component :is="Component"
                     :key="key"
                     class="w-full h-full"></component>
        </keep-alive>
      </transition>
    </template>
  </router-view>
</template>

<script lang="ts" setup>
import {useMenuStore} from '@/stores/menu'
import {useRoute} from "vue-router";
import {computed} from "vue";

const route = useRoute()
const menuStore = useMenuStore()
const props = defineProps({
  //是否作为顶层路由出口，true仅用于包括/layout以及登录页面或者其他不需要菜单树的页面出口，否则都应该为false
  isTopRouterView: {
    type: Boolean,
    default: false
  },
  //过度动画时间，单位秒
  transitionTime: {
    type: Number,
    default: 0.5
  }
})

const key = computed(() => {
  //如果当前路由并非顶层路由，说明有两个路由出口，顶层路由出口不应该执行渲染动画，所以返回固定值-1
  if (!route.meta.isTopPage && props.isTopRouterView) {
    return -1;
  } else {
    return route.meta.id;
  }
})
const transitionTimeSeconds = computed(() => props.transitionTime + 's')
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity v-bind(transitionTimeSeconds) ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
